<style lang="scss" scoped>

    .container{
      width:100%;
      height: auto;
      float: left;
    }

    .project-banner{
      width:100%;
      height: 120px;
      padding-top: 40px;
      background: #e7eaf0;
      clear: both;
    }


    .icon-edit{
      display: inline-block;
      width:20px;
      height: 20px;
      background-size: cover;
      background-image: url("../../../assets/images/edit-icon.png");
      cursor: pointer;
    }

    .icon-view{

      @extend .icon-edit;
      width:24px;
      height: 16px;
      background-image: url("../../../assets/images/icon-view.png");
    }


    .pagination-container{
      width:100%;
      height: auto;
      clear: both;
      float: left;
      text-align: center;
      padding-bottom: 30px;
    }

</style>

<template>
  <div class="container">
      <banner :name="user.name" :corporation="user.company"></banner>
      <div class="project-banner">
        <el-col :span="3" style="margin:0 20px">
          <el-select v-model="searchParams.type" placeholder="任务类别" @change="selectChangeHandle">
            <el-option  v-for="item in typeOptions" :key="item.key" :label="item.key" :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3" style="margin:0 20px">
          <el-select v-model="searchParams.status" placeholder="任务状态" @change="selectChangeHandle">
            <el-option  v-for="item in statusOptions" :key="item.key" :label="item.key" :value="item.value"></el-option>
          </el-select>
        </el-col>
      </div>
      <el-table :data="todoTask" style="width: 100%;">
        <el-table-column prop="id" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="dothing.data.content" label="类别" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" :formatter="getTaskStatus">
        </el-table-column>

        <!--不包括自己-->
        <el-table-column prop="project.data" label="业主单位" align="center" v-if="user.role!=1" :formatter="getOwner">
        </el-table-column>
        <el-table-column prop="project.data" label="施工单位" align="center" v-if="user.role!=2" :formatter="getConstruction">
        </el-table-column>
        <el-table-column prop="project.data" label="监理单位" align="center" v-if="user.role!=3" :formatter="getAudit">
        </el-table-column>

        <!--

        created_at:创建时间

        dothing 任务类别

        id 5

        project 项目基本信息

        project_id 项目id

        role 角色

        status_type 任务状态

        user_id 用户 id

        -->

        <el-table-column prop="created_at" label="剩余时间" align="center">
          <template scope="scope">
            <!--创建时间  -->
            <span v-if="scope.row.status === 0">
              <el-tag :type="getStatus(scope.row.do_task_at)"  v-if="!isOutDate(scope.row.do_task_at)">{{getTime(scope.row.do_task_at)}}</el-tag>
              <el-tag type="warning"  v-else >超过任务时间</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="project.data" label="处理人" align="center" :formatter="getResponsibility">
        </el-table-column>
        <el-table-column prop="created_at" label="操作"  align="center">
          <template scope="scope">
            <span :class="{'icon-edit':scope.row.status === 0,'icon-view':scope.row.status === 1}"
                  @click="viewTask($event,scope.row)"></span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <table-pagination :dataTotal="dataTotal"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"></table-pagination>
      </div>
  </div>
</template>

<script>

  import  Banner from "../delegate/Banner/Index";

  import { getStatus } from "@/conf/rule.js";

  import tablePagination from '@/components/TablePagination'

  import { mapState } from "vuex";

  import { TODOTASK_STATUS, TASK_TYPE_OPTIONS } from "@/conf/options";

  import { OWNER_REPRESENTATIVE,PROJECT_RESPONSIBILITY,CHIEF_ENGINEER,CONSTRUCTION_ORGANIZATION,AUDIT_ORGANIZATION,ROLES } from "@/conf/roles";

  import moment from 'moment'
  moment.locale('zh-CN')

  import _ from 'lodash'

  export default {
      name: 'TodoTask',
      components: {
        Banner,
        tablePagination
      },
      computed: {
        ...mapState({
          user: state => state.user.userData,
        }),
        typeOptions () {

          const typeOptions = _.clone(TASK_TYPE_OPTIONS[this.user.role])

          typeof typeOptions;

          typeOptions.unshift({
            key: '全部',
            value: null
          })

          return typeOptions

        }
      },
      data () {
        return {
          statusOptions: [
            {
              key: '全部',
              value: null
            },
            {
              key: '未完成',
              value: 0
            },
            {
              key: '已完成',
              value: 1
            }
          ],
          dataTotal: 0,
          todoTask: [],
          searchParams: {
            limit: 10,
            page: 1,
            status: null,
            type: null,
            role: ''
          }
        }
      },
      created () {
        this.getTaskList(this)
      },
      methods:{
        getTaskList: _.debounce((self) => {
          self.searchParams.role = self.user.role
          self.$store.dispatch('getMyTask', {token: self.user.token, searchParams: self.searchParams}).then(res=>{
            if (res.status === 200 && res.statusText === 'OK') {
              self.todoTask = res.data.data
              self.dataTotal = res.data.meta.pagination.total
            } else {
              self.$message('数据请求失败!')
            }

          }, (res)=>{

            self.$message("数据请求失败,错误信息:"+JSON.stringify(res));

          }).catch(err=>{

            self.$message('系统错误，请求数据错误，错误信息:'+JSON.stringify(err));

          })
        }, 200),
        viewTask ($event,item) {

          /**
           * 施工单位查看进度计划
           */

          /**
           * 监理单位查看进度计划
           */

          /**
           * 业主单位查看进度计划
           */
          const tId = item.id
          const project_id = item.project.data.id
          var PART=this.user.role;
          const typeOption = _.find(this.typeOptions, o => {
            return o.value === item.task_type
          })
          switch (PART) {
            case OWNER_REPRESENTATIVE:
              this.$router.push({name: typeOption.name, params: {'taskId': tId, 'projectId': project_id}})
              break;
            case PROJECT_RESPONSIBILITY:
              this.$router.push({name: typeOption.name, params: {'taskId': tId, 'projectId': project_id}})
              break;
            case CHIEF_ENGINEER:
              this.$router.push({name: typeOption.name, params: {'taskId': tId, 'projectId': project_id}})
              break;
            case CONSTRUCTION_ORGANIZATION:

              this.$router.push({name: typeOption.name, params: {'taskId': tId, 'projectId': project_id}});

              break
            case AUDIT_ORGANIZATION:
              this.$router.push({name: typeOption.name, params: {'taskId': tId, 'projectId': project_id}})
              break
          }

        },
        getTime(time){
          const complateTime = moment(time).add(2, 'days')
          const diffHours = complateTime.diff(moment(), 'hours')
          const diffMin = complateTime.subtract(diffHours, 'hours').diff(moment(), 'minutes')
//          const diffSec = complateTime.subtract(diffMin, 'minutes').diff(moment(), 'seconds')
          return `剩余${diffHours}小时${diffMin}分`
        },
        isOutDate(input){
          return moment(input).add(2, 'days').unix() < moment().unix()
        },
       getStatus:function (input) {
         return getStatus(input);
       },
        /**
         * 任务类型格式化
         * @param row
         * @param column
         * @param cell
         */
       getTaskType(row,column,cell){
          return cell.content;
       },
        /**
         * 任务状态格式化
         * @param row
         * @param column
         * @param cell
         */
       getTaskStatus(row,column,cell){

         for (var i=0;i<TODOTASK_STATUS.length;i++){

           if(cell==TODOTASK_STATUS[i].value)
           {
              return TODOTASK_STATUS[i].key
           }
         }

         return '未知任务';

       },
        /**
         * 项目负责人
         * @param row
         * @param column
         * @param cell
         */
       getResponsibility(row,column,cell){
          return cell.project_manager;
       },
        /**
         * 业主
         * @param row
         * @param column
         * @param cell
         * @returns {string|*|string}
         */
       getOwner(row,column,cell){

         return cell.apply_complay;

       },
        /**
         * 监理单位
         * @param row
         * @param column
         * @param cell
         */
       getAudit(row,column,cell){

          return cell.jianli_company;

       },
       getConstruction(row,column,cell){
         return cell.construction_organeation;
       },
        handleSizeChange (val) {
          this.searchParams.limit = val
        },
        handleCurrentChange (val) {
          this.searchParams.page = val
        },
        selectChangeHandle () {
          this.getTaskList(this)
        }
      },
    watch: {
      'searchParams.limit' () {
        this.getTaskList(this)
      },
      'searchParams.page' () {
        this.getTaskList(this)
      }
    }
  }
</script>
